<template>
    <div>
        <!-- 还款计划:rzHkjh-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="line"></div>
                {{ name }}
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
                <el-button type="primary" v-if="type == 'useForm'&&isReset==1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox rzHkjh">
            <div class="d_f a_i_c j_c_s_b m_t_20">
                <div style="width: 10%;" class="size">期数</div>
                <div style="width: 40%;" class="label">还款日期</div>
                <div style="width: 40%;" class="label">应还本金</div>
                <div style="width: 26px;"></div>
            </div>
            <div v-for="(item, index) in model.repaymentSchedule.rejectRemark"
                class="d_f rzHkjh_from1 m_t_20 a_i_c j_c_s_b">
                <div style="width: 10%;">第{{ index + 1 }}期</div>
                <div style="width: 40%;">
                    <el-date-picker clearable :disabled="isAudit" v-model="item.date" placeholder="请选择还款日期" value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD" />
                </div>
                <div style="width: 40%;">
                    <el-input v-model="item.principal" :disabled="isAudit" @input="input(item, index)" placeholder="请输入应还本金">
                        <template #suffix>
                            <span class="suffix">
                                <span class="unit">元</span>
                            </span>
                        </template>
                    </el-input>
                </div>
                <div style="width: 26px;" class="d_f a_i_c">
                    <img src="../../assets/reduce.png" alt="" @click="reduce(index)" class="reduce" v-if="index > 0">
                </div>
            </div>
            <div class="d_f a_i_c j_c_s_b m_t_20">
                <div style="width: 10%;"></div>
                <div style="width: 40%;"></div>
                <div style="width: 40%;"></div>
                <div style="width: 26px;" @click="add">
                    <img src="../../assets/add.png" alt="" class="reduce">
                </div>
            </div>
            <div class="rzHkjh_from">
                <myform :fields="fields"  ref="form1" :model="model.repaymentSchedule" :options="options"
                    class="m_t_16">
                    <template v-slot:total>
                        <span class="d_f a_i_c">
                            <span class="color m_l_5">￥ <span class="size1">{{ model.repaymentSchedule.total
                    || '0.00' }}</span></span>
                        </span>
                    </template>
                </myform>
            </div>

            <div class="segment" v-if="fields1.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields1.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div class="acceptance_form" v-if="fields1.length > 0">
                <myform :fields="fields1" :model="model.repaymentSchedule" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { rzHkjhType } from './data'
import { CloseBold } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { formGet, unitFormSet } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { copy } from '../../utils/date'
const model = {
    repaymentSchedule: {
        rejectRemark: [
            {
                date: '',//还款日期
                principal: '',//应还本金
            }
        ],
        total: 0,
        repaymentScheduleRemark: '',
    },
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        vars: {
            type: Object,
            default: {}

        },
        isAudit: {
            type: Boolean,
            default: true
        }
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data: rzHkjhType = reactive({
            name: '还款计划',
            status: true,
            options: {},
            model: copy(model),
            subTitle: '',
            fields: [
                {
                    label: "应还总金额",
                    prop: 'total',
                    disabled: false,
                },
                {
                    label: "详细意见备注",
                    prop: 'repaymentScheduleRemark',
                    placeholder: '请输入详细意见备注',
                    type: 'textarea',
                    labelWidth: '150px',
                    disabled: false,
                },
            ],
            fields1: [],
            rules: {
                // repaymentScheduleRemark: [
                //     { required: true, message: '请输入详细意见备注', trigger: 'blur' },
                // ],
            },
            id: '',
            isReset:2,
        })
        const router = useRouter()
        const form1 = ref()
        onBeforeMount(() => {
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            //获取自定义表单
            getData() {
                formGet({ tag: 'rzHkjh' }).then((res: any) => {
                    data.name = res.name
                    data.id = res.id
                    data.isReset=res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item:any)=>{
                        data.model.repaymentSchedule[item.prop]=''
                    })
                    data.fields1 = formStruct.formFields
                    data.fields.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields1.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = props.vars
                        for (let key in data.model.repaymentSchedule) {
                            if(localData.repaymentSchedule[key]!=null){
                                data.model.repaymentSchedule[key] = localData.repaymentSchedule[key]
                            }
                        }
                        data.model.repaymentSchedule.rejectRemark=localData.repaymentSchedule.rejectRemark||[]
                    } 
                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
            },
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            add() {
                data.model.repaymentSchedule.rejectRemark.push({
                    date: '',//还款日期
                    principal: '',//应还本金
                })
            },
            reduce(index: number) {
                data.model.repaymentSchedule.rejectRemark.splice(index, 1)
                methods.input('',0)
            },
            input(item: any, index: number) {
                if(item){
                    if (/[^0-9.]/g.test(item.principal)) {
                    data.model.repaymentSchedule.rejectRemark[index].principal = ''
                    return
                }
                }
                let arr = data.model.repaymentSchedule.rejectRemark.map(item => {
                    return item.principal
                })
                let total = 0
                arr.map((item: string) => {
                    let a = Number(item)
                    total += a
                })
                data.model.repaymentSchedule.total = total
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
            },
            resultData() {
                return new Promise((resolve, reject) => {

                    if (data.model.repaymentSchedule.rejectRemark.length == 0) {
                        Message({ type: 'error', message: '请输入还款计划' })
                        reject(false)
                        return

                    }
                    if (data.model.repaymentSchedule.rejectRemark.some(item => !item.date)) {
                        Message({ type: 'error', message: '请选择还款日期' })
                        reject(false)
                        return
                    }
                    if (data.model.repaymentSchedule.rejectRemark.some(item => !item.principal)) {
                        Message({ type: 'error', message: '请输入应还本金' })
                        reject(false)
                        return
                    }
                    form1.value.verification().then((res) => {
                        resolve(data.model)
                    })

                })
            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
        }

        return {
            ...toRefs(data),
            ...methods,
            form1,
        }
    }
})
</script>
<style scoped lang='scss'>
.vote {
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
}

.num {
    color: rgba(0, 0, 0, 0.9);
    font-size: 36px;
    font-weight: 700;
}

.talk {
    width: 22px;
    height: 22px;
}

.reduce {
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.label {
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
}

.label::before {
    color: var(--el-color-danger);
    content: "*";
    margin-right: 4px;
}

.size {
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
}
</style>
<style lang='scss'>
.rzHkjh {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;

        .el-form-item__content {
            width: calc(100% - 150px) !important;

            .el-input,
            .el-cascader,
            .el-select {
                width: 100% !important;
            }
        }

    }
}

.rzHkjh_from {
    .el-form-item {
        width: 100% !important;
    }

    .color {
        color: #1878FF;
        font-size: 18px;
        font-weight: 700;

        .size1 {
            font-size: 22px;
        }
    }
}

.rzHkjh_from1 {

    .el-select,
    .el-input {
        width: calc(100% - 20px) !important;
    }
}
</style>